
<template>
  <transition name="fade">
    <div class="flex-col a-c s-msb-box" v-show="isShow">
      <div :class="'flex-row a-c s-msg-'+type">
        <svg
          t="1578555845372"
          class="icon"
          v-if="type=='success'"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5826"
          width="16"
          height="16"
        >
          <path
            d="M511.434623 63.564711c-247.428276 0-448.010617 200.582341-448.010617 448.01164 0 247.430322 200.581318 448.01164 448.010617 448.01164 247.432369 0 448.012663-200.581318 448.012663-448.01164C959.447287 264.147052 758.865969 63.564711 511.434623 63.564711zM773.519714 382.576325 447.871959 704.039781 245.771031 507.044128l63.996546-68.093864 138.15964 138.15964 261.086343-261.087367L773.519714 382.576325z"
            p-id="5827"
            fill="#ffffff"
          />
        </svg>
        <svg
          t="1578555598863"
          class="icon"
          v-if="type=='warn'"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3709"
          width="16"
          height="16"
        >
          <path d="M544 704a32 32 0 1 1-32-32 32 32 0 0 1 32 32" p-id="3710" fill="#ffffff" />
          <path
            d="M896 512a384 384 0 1 0-384 384 384 384 0 0 0 384-384z m64 0A448 448 0 1 1 512 64a448 448 0 0 1 448 448z"
            p-id="3711"
            fill="#ffffff"
          />
          <path d="M480 288a32 32 0 0 1 64 0v320a32 32 0 0 1-64 0z" p-id="3712" fill="#ffffff" />
        </svg>
        <svg
          t="1578555816212"
          class="icon"
          v-if="type=='error'"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5001"
          width="16"
          height="16"
        >
          <path
            d="M510.567403 957.179574C263.853702 957.179574 63.904067 757.229939 63.904067 510.516239S263.853702 63.852903 510.567403 63.852903c246.7137 0 446.663336 199.949635 446.663336 446.663336S757.281103 957.179574 510.567403 957.179574L510.567403 957.179574zM715.4288 380.252223c8.390926-8.390926 8.390926-22.0006 0-30.391526l-45.638453-45.638453c-8.390926-8.390926-22.0006-8.390926-30.391526 0L510.158089 433.462976 380.917358 304.222244c-8.390926-8.390926-22.0006-8.390926-30.391526 0l-45.638453 45.638453c-8.390926 8.390926-8.390926 22.0006 0 30.391526l129.240731 129.240731L304.887379 638.733686c-8.390926 8.390926-8.390926 22.0006 0 30.391526l45.638453 45.638453c8.390926 8.390926 22.0006 8.390926 30.391526 0l129.240731-129.240731 129.240731 129.240731c8.390926 8.390926 22.0006 8.390926 30.391526 0l45.638453-45.638453c8.390926-8.390926 8.390926-22.0006 0-30.391526L586.188068 509.492955 715.4288 380.252223 715.4288 380.252223z"
            p-id="5002"
            fill="#ffffff"
          />
        </svg>
        <span>{{msg}}</span>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "msg",
  data() {
    return {
      msg: "成功",
      time: 1500,
      type: "success",
      isShow: false
    };
  },
  async mounted() {
    this.isShow = true;
    await this.chose();
  },
  methods: {
    async chose() {
      const that = this;
      window.setTimeout(() => {
        that.isShow = false;
        return Promise.resolve();
      }, that.time);
    }
  }
};
</script>
<style scoped>
.s-msb-box {
  position: fixed;
  z-index: 99999;
  width: 100%;
  top: 70px;
}
.s-msb-box div {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 5px;
  font-weight: bold;
  color: #fff;
}
.s-msb-box div span {
  margin-left: 5px;
}
.s-msg-success {
  background: rgb(11, 157, 69);
}
.s-msg-warn {
  background: rgb(222, 111, 52);
}
.s-msg-error {
  background: rgb(206, 46, 46);
}
.fade-enter-active,
.fade-leave-active {
  transition: all 1s;
}
.fade-enter {
  opacity: 0;
  margin-left: 0;
}
.fade-leave-to {
  opacity: 0;
  margin-left: 0;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
  margin-left: 0;
}
.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.a-c {
  align-items: center;
}
.w100 {
  width: 100%;
}
</style>

